<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
		<title>Chreemi - Chrome for Meemi, Option Page</title>
		
		<link href="style.bookmarklet.css" rel="stylesheet" type="text/css" media="all"/> 
			<script src="jquery.js" type="text/javascript"></script> 

		<script>
			var defaultDelay = 1000 * 90;
			var minimumDelay = 1000 * 30;
		
			var usernameTextBox;
			var saveButton;
			var radioShow;
			var radioHide;
			var whereToReadMeme = localStorage.whereToReadMeme || 'meemi';
			
			var notification = localStorage.notification || 0;
			
			var checkboxLabels = [ "Memi", "Risposte", "Memi Privati", "Risposte Private", "Citazioni", "Followers" ];
			
			function init() {
				usernameTextBox = document.getElementById( "username" );
				delayTextBox = document.getElementById( "delay-time" );
				saveButton = document.getElementById( "save-button" );
				radioShow = document.getElementById( "button-behaviour-show" );
				radioHide = document.getElementById( "button-behaviour-hide" );

				usernameTextBox.value = localStorage.username || "";
				delayTextBox.value = localStorage.requestDelay / 1000 || defaultDelay / 1000;
				radioShow.checked = 1;
				if( localStorage.showPopup == 0 ) {
					radioShow.checked = 0;
					radioHide.checked = 1;
				}
				$('input[name=button-readmeme][value='+localStorage.whereToReadMeme+']').click();
				
				markClean();
			}
			
			function save() {
				localStorage.username = usernameTextBox.value;
				localStorage.notification = notification;
				localStorage.whereToReadMeme = whereToReadMeme;
				
				var intDelay = parseInt( delayTextBox.value ) * 1000;
				if( isNaN( intDelay ) || intDelay < 1000 * 30 ) 
					localStorage.requestDelay = defaultDelay;
				else
					localStorage.requestDelay = intDelay;

				markClean();
				chrome.extension.getBackgroundPage().init();
			}
			
			function setFlag( flagPosition ) {
				if( flagPosition < 0 && flagPosition > 5 )
					return;
				var meemiNotification = 5 - flagPosition;
				var mask = 1 << meemiNotification;
				
				notification ^= mask;
				
				markDirty();
			}
			
			function getFlag( flagPosition ) {
				if( flagPosition < 0 && flagPosition > 5 )
					return 0;
				var meemiNotification = 5 - flagPosition;
				var mask = 1 << meemiNotification;
				if(( notification & mask ) == 0 )
					return 0;
				return 1;
			}

			function markDirty() { saveButton.disabled = false; }
			function markClean() { saveButton.disabled = true; }
			
			function setPopup() {
				radioShow.checked = 1;
				radioHide.checked = 0;
				chrome.browserAction.setPopup({ popup: "popup.html" });
				chrome.browserAction.setTitle({ title: "Condividi su Meemi." })
				localStorage.showPopup = 1;
				markDirty();
			}
			function removePopup() {
				radioHide.checked = 1;
				radioShow.checked = 0;
				chrome.browserAction.setPopup({ popup: "" });
				chrome.browserAction.setTitle({ title: "Go to Meemi Home Page." });
				localStorage.showPopup = 0;
				markDirty();
			}
			
			function setMemeReader(){
				whereToReadMeme = $('input[name=button-readmeme]:checked').val();
				markDirty();
			}
			
			function drawCheckboxes() {
				for( var index = 0, checkbox; index < checkboxLabels.length; index++ ) {
					
					checkbox = document.createElement( "input" );
					checkbox.setAttribute( "id", "checkbox_" + index);
					checkbox.setAttribute( "type", "checkbox" );
					checkbox.setAttribute( "name", "show-options[]" );
					checkbox.setAttribute( "onClick", "setFlag(" + index + ")" );
					
					checkbox.checked = getFlag( index );
					
					//checkLabel = document.createTextNode( checkboxLabels[index] );
					checkLabel = document.createElement("LABEL");
					checkLabel.setAttribute("for","checkbox_" + index);
					checkLabel.innerHTML = checkboxLabels[index];

					
					document.body.appendChild( checkbox );
					document.body.appendChild( checkLabel );
					document.body.appendChild( document.createElement( "br" ) );
				}
			}
		</script>
		
	</head>
	<body onload="init()">
		<div ID="header"><h1>Chreemi Option</h1></div>
		<p>Inserisci il tuo Username di Meemi: <input type="text" id="username" oninput="markDirty()" /><br />
		Chreemi non necessita della Password per accedere al tuo account perché sfrutta le credenziali memorizzate nel Browser.<br />
		Se l'icona riporta "Err" verifica di aver già effettuato l'autenticazione sul sito Meemi.com e di aver selezionato "Ricorda i miei dati."
		</p>
		<p>Seleziona le tue preferenze:
		<script>
			drawCheckboxes();
		</script>
		</p>
		
		<p>Secondi tra ogni controllo: <input type="text" id="delay-time" oninput="markDirty()" /><br />
		Sono accettati, ovviamente solo valori numerici positivi, maggiori di 30.</p>
		
		<p>Comportamento preferito del Pulsante:<br />
		<input type="radio" id="button-behaviour-show" onClick="setPopup()" /><label for="button-behaviour-show">Bookmarklet Popup</label><br />
		<input type="radio" id="button-behaviour-hide" onClick="removePopup()" /><label for="button-behaviour-hide">Go to Meemi Home Page</label><br />
		</p>
		
		<p>Visualizzazione dei memi:<br />
		<input type="radio" name="button-readmeme" id="button-readmeme-meemi" value="meemi" onchange="setMemeReader()"/><label for="button-readmeme-meemi">Meemi.com</label><br />
		<input type="radio" name="button-readmeme" id="button-readmeme-popup" value="popup" onchange="setMemeReader()" /><label for="button-readmeme-popup">Popup (sperimentale!)</label><br />
		</p>
		
		<div ID="footer">
			<button id="save-button" style="font-weight:bold" onclick="save()">Salva</button>
			<button onclick="init()">Cancel</button>
		</div>
	</body>
	</html>
